<template>
  <div class="drop-container" :style="styleObj">
    <div class="dropdown">
        <div class="dropdown-navs-icon">
            <router-link to="/">
                <div class="iconbg"><p class="iconfont">&#xe65e;</p></div>
                <p style="color: gray; margin-top: 5px;">商城首页</p>
            </router-link>
        </div>
        <!-- 各个栏目 -->
        <div class="dropdown-column" v-for="item of colList" :key="item.colId">
            <p class="title">{{item.colId}}</p>
            <div class="link-container">
                <ul v-for="i in item.ulNum" :key="i">
                    <li v-for="linkData in inColList(item.colId,i)" :key="linkData.name">
                        <a :href="linkData.href" target="_blank">{{linkData.name}}</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import { reactive, ref } from 'vue'
import props from './BaseConfig'
import { getPosition } from './BaseConfig'
export default {
  name: 'VmDropdownBar2',
  props,
  setup (props) {
    const { top, left, right, bottom } = getPosition(props)
    const styleObj = reactive({
        top,
        left,
        right,
        bottom
    })
    const inColList = (colId,i) => {
        // 先筛选出id对应的栏目
        const linkInfo = props.colList.find(data => data.colId == colId)
        // 在给链接进行分组排序
        const newLinkList = ref([])
        for(let i = linkInfo.ulNum; i>=1; i--) {
            newLinkList.value.push(linkInfo.linkData.filter(data => data.ulId != i))
        } 
        return newLinkList.value[i-1]
    }
    return { styleObj, inColList }
  }
}
</script>

<style lang="scss" scoped>
.drop-container {
    position: absolute;
    background: #fff;
    display: flex;
    flex-basis: auto;
    flex-direction: column;
    flex-shrink: 0;
    width: 893px;
    height: 210px;
    z-index: 9999999;
    .dropdown {
        font-size: 12px;
        line-height: 20px;
        display: flex;
        justify-content: flex-start;
        margin: 37px 46px 0 49px;
        .dropdown-navs-icon {
            float: left;
            width: 50px;
            text-align: center;
            color: #777;
            margin-right: 8%;
            .iconbg {
               width: 50px;
               height: 50px;
               position: relative;
               border-radius: 50%;
               background: #f0f0f4; 
               display: flex;
               align-items: center;
               p {
                font-size: 30px;
                position: relative;
                left: 50%;
                color: #a1afc9;
                margin-left: -15px;
                bottom: 5px;
               }
            }
        }
        .dropdown-column {
            margin-right: 3%;
            .title {
                color: #333;
                font-size: 16px;
                font-weight: 700;
                margin-bottom: 8px;
            }
        }
    }
}
.link-container {
    display: flex;
    ul {
        &:last-child {
            margin: 0;
        }
        li {
            width: 80px;
            height: 20px;
            margin-bottom: 3px;
            a {
                color: #73575c;
                line-height: 10px;
                &:hover {
                    color: #cc163a;
                }
            }
        }
    }
}
</style>>
